<template>
  <h1 class="text1">欢迎使用康田卫士!</h1>

  <div class="carousel" @mouseleave="startAutoplay" @mouseenter="stopAutoplay">
    <div class="carousel-item" v-for="(item, index) in items" :key="index" :class="{ 'active': currentIndex === index }">
      <img :src="require(`@/assets/${item.imageUrl}`)" :alt="item.title">
      <div class="caption">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>
    <div class="controls">
      <button @click="prevSlide">Prev</button>
      <button @click="nextSlide">Next</button>
    </div>
  </div>
</template>

<style scoped>
.text1{
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

 .carousel {
   position: relative;
   width: 100%;
   height: 480px;
   overflow: hidden;
   border-radius: 5px;
 }

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
}

.controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.controls button {
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 5px;
  color: #333;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin: 0 35rem;
}

.controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

</style>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      items: [
        {
          imageUrl: 'home2.png',
          title: '科学化种植',
          description: '我们为您提供科学化的方法进行作物种植'
        },
        {
          imageUrl: 'home3.png',
          title: '信息交流',
          description: '打造一个完善的农业前沿交流社区'
        },
        {
          imageUrl: 'home4.png',
          title: '精准识别',
          description: '运用大模型，在线精准识别害虫'
        },
        {
          imageUrl: 'home5.png',
          title: '知识科普',
          description: '科普农业知识'
        }
      ]
    }
  },
  methods: {
    prevSlide() {
      this.currentIndex = (this.currentIndex - 1 + this.items.length) % this.items.length;
    },
    nextSlide() {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
    },

    startAutoplay() {
      this.autoPlayInterval = setInterval(() => {
        this.nextSlide();
      }, 2500);
    },
    stopAutoplay() {
      clearInterval(this.autoPlayInterval);
    },

    created() {
      this.startAutoplay();
    }
  }
}
</script>
